import * as echarts from "echarts";

const emotionData = [];

// 轨迹
export const option = {


  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "value",
      splitLine: {
        // 隐藏图表内刻度线
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "transparent"
        }
      }
    },

    // 适配折线图x轴
    {
      type: "category",
      name: "lineX",
      position: "top",
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      boundaryGap: false, // 从起始点开始描点 不从中间开始描点
      data: ["教室巡视", "师生互动", "书写板书", "指导学生", "教师讲授"]
    },

    // 适配散点图x轴
    {
      type: "value",
      name: "scatterX",
      position: "top",
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      splitLine: {
        // 隐藏图表内刻度线
        show: false
      }
    }
  ],

  yAxis: [
    {
      type: "category",
      data: ["教室巡视", "师生互动", "书写板书", "指导学生", "教师讲授"],
      axisTick: {
        // 轴上的刻度格
        show: false
      },


      axisLine: {
        show: false,
        lineStyle: {
          color: "#ccc"
        }
      }
    },

    {
      type: "value",
      name: "Evaporation",
      position: "top",
      max: 350, // value的最大值
      axisLine: {
        // 坐标轴线
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },

      splitLine: {
        show: false
      }
    }
  ],

  series: [

    // 第一柱状图
    {
      name: "Direct",
      type: "bar",
      stack: "total",
      emphasis: {
        focus: "series"
      },
      barCategoryGap: '50%', // 设置柱状图之间的间距为 50%
      showBackground: true,
      data: [320, "-", "-", "-", "-"],
      itemStyle: {
        color: "#cbe21a"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      showBackground: true,

      data: [230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      showBackground: true,

      data: [120, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      showBackground: true,

      data: [230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      showBackground: true,

      data: [220, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      showBackground: true,

      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: [230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      showBackground: true,

      data: [150, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      showBackground: true,

      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: [230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",
      showBackground: true,

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: [820, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    // 第二柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 300, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      data: ["-", 320, "-", "-", "-"],
      itemStyle: {
        color: "#15c136"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 300, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", 180, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 180, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", 290, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", 500, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 170, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", 540, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第三柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 150, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", 100, "-", "-"],
      itemStyle: {
        color: "#6849ff"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 400, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", 450, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 160, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", 360, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 440, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", 60, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 500, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", 420, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第四柱状图
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", 200, "-"],
      itemStyle: {
        color: "#16c9ba"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 115, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", 623, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 440, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", 180, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 500, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", 340, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 680, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", 366, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第五柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 322],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", "-", 122],
      itemStyle: {
        color: "#1978e5"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 245],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", 360],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 512],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", 604],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 322],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", 425],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 150],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", 346],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    }
  ]
};

// 对比
export const comparisionOption = {


  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "value",
      splitLine: {
        // 隐藏图表内刻度线
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "transparent"
        }
      }
    },

    // 适配折线图x轴
    {
      type: "category",
      name: "lineX",
      position: "top",
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      boundaryGap: false, // 从起始点开始描点 不从中间开始描点
      data: ["教室巡视", "师生互动", "书写板书", "指导学生", "教师讲授"]
    },

    // 适配散点图x轴
    {
      type: "value",
      name: "scatterX",
      position: "top",
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      splitLine: {
        // 隐藏图表内刻度线
        show: false
      }
    }
  ],

  yAxis: [
    {
      type: "category",
      data: ["教室巡视", "师生互动", "书写板书", "指导学生", "教师讲授"],
      axisTick: {
        // 轴上的刻度格
        show: false
      },


      axisLine: {
        show: false,
        lineStyle: {
          color: "#000"
        }
      }
    },

    {
      type: "value",
      name: "Evaporation",
      position: "top",
      max: 350, // value的最大值
      axisLine: {
        // 坐标轴线
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },

      splitLine: {
        show: false
      }
    }
  ],

  series: [

    // 第一柱状图
    {
      name: "Direct",
      type: "bar",
      stack: "total",
      emphasis: {
        focus: "series"
      },
      barCategoryGap: '50%', // 设置柱状图之间的间距为 50%
      showBackground: true,
      data: [320, "-", "-", "-", "-"],
      itemStyle: {
        color: "#cbe21a"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      showBackground: true,

      data: [230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      showBackground: true,

      data: [120, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      showBackground: true,

      data: [230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      showBackground: true,

      data: [220, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      showBackground: true,

      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: [230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      showBackground: true,

      data: [150, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      showBackground: true,

      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: [230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",
      showBackground: true,

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: [820, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    // 第二柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 300, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      data: ["-", 320, "-", "-", "-"],
      itemStyle: {
        color: "#15c136"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 300, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", 180, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 180, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", 290, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", 500, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 170, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", 540, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第三柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 150, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", 100, "-", "-"],
      itemStyle: {
        color: "#6849ff"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 400, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", 450, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 160, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", 360, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 440, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", 60, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 500, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", 420, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第四柱状图
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", 200, "-"],
      itemStyle: {
        color: "#16c9ba"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 115, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", 623, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 440, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", 180, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 500, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", 340, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 680, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", 366, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第五柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 322],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", "-", 122],
      itemStyle: {
        color: "#1978e5"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 245],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", 360],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 512],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", 604],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 322],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", 425],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 150],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", 346],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    }
  ]
};



// 轨迹
export const stuOption = {


  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "value",
      splitLine: {
        // 隐藏图表内刻度线
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "transparent"
        }
      }
    },

    // 适配折线图x轴
    {
      type: "category",
      name: "lineX",
      position: "top",
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      boundaryGap: false, // 从起始点开始描点 不从中间开始描点
      data: ["情绪", "讨论", "阅读", "演示", "实践", "听讲"]
    },

    // 适配散点图x轴
    {
      type: "value",
      name: "scatterX",
      position: "top",
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      splitLine: {
        // 隐藏图表内刻度线
        show: false
      }
    }
  ],

  yAxis: [
    {
      type: "category",
      data: ["情绪", "讨论", "阅读", "演示", "实践", "听讲"],
      axisTick: {
        // 轴上的刻度格
        show: false
      },


      axisLine: {
        show: false,
        lineStyle: {
          color: "#ccc"
        }
      }
    },

    {
      type: "value",
      name: "Evaporation",
      position: "top",
      max: 350, // value的最大值
      axisLine: {
        // 坐标轴线
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },

      splitLine: {
        show: false
      }
    }
  ],

  series: [
    // 折线图
    {
      name: "Direct",
      type: "line",

      emphasis: {
        focus: "series"
      },
      smooth: true,
      data: [50, 50, 30, 50, 30, 50],
      itemStyle: {
        color: "#07a5b8"
      },
      lineStyle: {
        width: 3 // 设置折线宽度为 4
      },
      areaStyle: {
        color: "#0e6184"
      },
      symbol: function (data, itemOptions, seriesType, seriesName) {
        emotionData.push(data);
        return "none";
      },

      xAxisIndex: 1, // 使用第二个 x 轴
      yAxisIndex: 1 // 使用第二个 x 轴
    },

    // 散点情绪图
    {
      symbolSize: 20,
      data: [
        [0.2, 30],
        [1, 30],
        [2, 30],
        [3, 30],
        [4, 30],
        [4.8, 30]
      ],

      symbol: function (data, itemOptions, seriesType, seriesName) {
        // 自定义符号样式
        if (emotionData[itemOptions.dataIndex] === 50) {
          return "path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z";
        } else {
          return "path://M32 2c0-1.422-0.298-2.775-0.833-4-1.049 2.401-3.014 4.31-5.453 5.287-2.694-2.061-6.061-3.287-9.714-3.287s-7.021 1.226-9.714 3.287c-2.439-0.976-4.404-2.886-5.453-5.287-0.535 1.225-0.833 2.578-0.833 4 0 2.299 0.777 4.417 2.081 6.106-1.324 2.329-2.081 5.023-2.081 7.894 0 8.837 7.163 16 16 16s16-7.163 16-16c0-2.871-0.757-5.565-2.081-7.894 1.304-1.689 2.081-3.806 2.081-6.106zM18.003 11.891c0.064-1.483 1.413-2.467 2.55-3.036 1.086-0.543 2.16-0.814 2.205-0.826 0.536-0.134 1.079 0.192 1.213 0.728s-0.192 1.079-0.728 1.213c-0.551 0.139-1.204 0.379-1.779 0.667 0.333 0.357 0.537 0.836 0.537 1.363 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.037 0.001-0.073 0.003-0.109zM8.030 8.758c0.134-0.536 0.677-0.862 1.213-0.728 0.045 0.011 1.119 0.283 2.205 0.826 1.137 0.569 2.486 1.553 2.55 3.036 0.002 0.036 0.003 0.072 0.003 0.109 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.527 0.204-1.005 0.537-1.363-0.575-0.288-1.228-0.528-1.779-0.667-0.536-0.134-0.861-0.677-0.728-1.213zM16 26c-3.641 0-6.827-1.946-8.576-4.855l2.573-1.544c1.224 2.036 3.454 3.398 6.003 3.398s4.779-1.362 6.003-3.398l2.573 1.544c-1.749 2.908-4.935 4.855-8.576 4.855z"; // 奇数索引使用矩形
        }
      },

      xAxisIndex: 2, // 使用第二个 x 轴
      yAxisIndex: 1, // 使用第二个 x 轴
      type: "scatter"
    },

    // 第一柱状图
    {
      name: "Direct",
      type: "bar",
      stack: "total",
      emphasis: {
        focus: "series"
      },
      barCategoryGap: '50%', // 设置柱状图之间的间距为 50%
      showBackground: true,
      data: ["-", 320, "-", "-", "-", "-"],
      itemStyle: {
        color: "#cbe21a"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: ["-", 120, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: ["-", 220, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: ["-", 150, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: ["-", 820, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    // 第二柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 300, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      data: ["-", "-", 320, "-", "-", "-"],
      itemStyle: {
        color: "#15c136"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 300, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", "-", 180, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 180, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", "-", 290, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 230, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", "-", 500, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 170, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", "-", 540, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第三柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 150, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", 100, "-", "-"],
      itemStyle: {
        color: "#6849ff"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 400, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", "-", 450, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 160, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", "-", 360, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 440, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", "-", 60, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 500, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", "-", 420, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第四柱状图
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", "-", 200, "-"],
      itemStyle: {
        color: "#16c9ba"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 115, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", "-", 623, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 440, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", "-", 180, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 500, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", "-", 340, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 680, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", "-", 366, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第五柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 322],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", "-", "-", 122],
      itemStyle: {
        color: "#1978e5"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 245],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", "-", 360],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 512],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", "-", 604],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 322],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", "-", 425],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 150],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", "-", 346],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    }
  ]
};


// 专注度
export const lineOption = {
  title: {
    text: '学生专注度曲线',
    right: '50%'
  },
  xAxis: {
    axisTick: {
      show: false
    },
    type: 'category',
    data: ['5分钟', '10分钟', '15分钟', '20分钟', '25分钟', '30分钟', '35分钟']
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true
    },
    name: '专注度值',
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      lineStyle: {
        color: '#84ffff'
      },
      symbol: 'none'
    }
  ]
};




// 情绪
const total = 150 + 230 + 224 + 218 + 135 + 147 + 260;
const percentage = (value) => {
  return ((value / total) * 100).toFixed(2);
};
const region = (value) => {
  let emotionText = '';
  if (value < 50) {
    emotionText = '恐惧';
  } else if (value >= 50 && value < 100) {
    emotionText = '厌恶';
  } else if (value >= 100 && value < 150) {
    emotionText = '愤怒';
  } else if (value >= 150 && value < 200) {
    emotionText = '快乐';
  } else if (value >= 200 && value < 250) {
    emotionText = '中性';
  } else if (value >= 250 && value < 300) {
    emotionText = '悲伤';
  } else if (value >= 300) {
    emotionText = '惊喜';
  }

  return emotionText;
};

export const emotionOption = {

  legend: {
    itemWidth: 8,
    itemHeight: 8,
    icon: 'rect',
    textStyle: {
      color: '#99B3C8',
      fontSize: 12,
      lineHeight: 12,
      rich: {
        a: {
          verticalAlign: "middle"
        }
      },
      padding: [0, 0, -2, 0] //[上、右、下、左]
    }
  },
  tooltip: {
    formatter: (params, index) => {
      return `时间 : ${params.name}<br />
      学生情绪：${region(params.value)} <br />
      情绪占比：${params.percent} % 
      `;
    }
  },
  xAxis: {
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#99B3C8"
      }
    },
    boundaryGap: false,
    axisLabel: {
      color: "#FFFFFF",
      fontSize: 12
    },
    type: 'category',
    data: ['5分钟', '10分钟', '15分钟', '20分钟', '25分钟', '30分钟', '35分钟']
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#99B3C8",
      }
    },
    max: 300,
    axisLabel: {
      color: "#99B3C8",
      fontSize: 12,
      formatter: function (value, index) {
        let text = '';
        switch (index) {
          case 0:
            // code
            text = '恐惧';
            break;
          case 1:
            // code
            text = '厌恶';
            break;
          case 2:
            // code
            text = '愤怒';
            break;
          case 3:
            text = '快乐';
            break;
          case 4:
            // code
            text = '中性';
            break;
          case 5:
            // code
            text = '悲伤';
            break;
          case 6:
            // code
            text = '惊喜';
            break;
          default:
          // code
        }
        return text;
      }
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: "课堂一",
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      lineStyle: {
        color: '#3158FF '
      },
      itemStyle: {
        color: '#3158FF '
      },
      areaStyle: {
        // 区域填充样式
        normal: {
          // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
            [
              { offset: 0, color: "rgba(49, 122, 255, 1)" },
              { offset: 1, color: "rgba(159, 88, 255, 0)" }
            ],
            false
          )
          // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
          // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      }
    },
    {
      name: "课堂二",
      data: [180, 220, 150, 80, 85, 250, 180],
      type: 'line',
      lineStyle: {
        color: '#FFA669'
      },
      itemStyle: {
        color: '#FFA669'
      },
      areaStyle: {
        // 区域填充样式
        normal: {
          // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
            [
              { offset: 0, color: "rgba(255, 212, 105, 1)" },
              { offset: 1, color: "rgba(236, 198, 101, 0)" }
            ],
            false
          )
          // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
          // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      }
    }
  ]
};

// st图
const x_value = [];
const show_data = [2, 6, 25, 35, 36, 36, 37, 39, 40, 63, 63, 63, 63, 66, 73, 74];
const _max = show_data[show_data.length - 1];
for (var i = 0; i < _max; i++) {
  x_value.push(i);
}
// S-T图的options
export const stOption = {
  tooltip: {
    trigger: "axis"
  },
  xAxis: {
    name: "T",
    nameLocation: "end",
    type: "category",
    boundaryGap: false,
    splitNumber: 5,
    max: _max,
    min: 0,
    data: x_value,
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "#3C5F95"
      }
    },
    axisTick: {
      show: false,
      alignWithLabel: true
    },
    axisLine: {
      lineStyle: {
        color: "#ccc",
        width: 1
      }
    }
  },
  yAxis: {
    name: "S",
    nameLocation: "end",
    max: _max,
    splitNumber: 5,
    min: 0,
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "#3C5F95"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: "#ccc",
        width: 1
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: "transparent"
      }
    }
  },
  series: [
    {
      name: "S-T曲线",
      type: "line",
      step: "end",
      lineStyle: {
        color: "#3DE2FF"
      },
      itemStyle: {
        color: "rgb(33,148,246)",
        borderWidth: 1,
        borderColor: "#3DE2FF"
      },
      data: [2, 6, 25, 35, 36, 36, 37, 39, 40, 63, 63, 63, 63, 66, 73, 74]
    }
  ]
};


// CH-RT图的options
export const rtOption = {
  tooltip: {
    trigger: "item", //触发：散点类用item，柱形之类的坐标轴触发用axis。trigger：item对应type：scatter/effectScatter；trigger：axis对应type：line
    axisPointer: {
      type: "effectScatter" //这里只有hover在辐射点之上才触发
    },
    formatter: function (param) {
      //显示框自定义
      return (
        '<p style="display:flex;justify-content:space-between"><span>CH值 :</span> ' +
        "<span>" +
        param.data[1].toFixed(2) +
        "</span>" +
        "</p>" +
        '<p style="display:flex;justify-content:space-between"><span>RT值 :</span> ' +
        "<span>" +
        param.data[0].toFixed(2) +
        "</span>" +
        "</p>"
      );
    }
  },
  xAxis: {
    name: "RT",
    axisLine: {
      lineStyle: {
        color: "#ccc",
        width: 1
      }
    },
    //隐藏方格线
    splitLine: {
      show: false
    }
  },
  yAxis: {
    name: "CH",
    axisLine: {
      lineStyle: {
        color: "#ccc",
        width: 1
      }
    },
    splitLine: {
      show: false
    }
  },
  series: [
    // 提示点
    {
      type: "effectScatter",
      symbolSize: 8,
      data: [[0.92, 0.05]],
      color: "#08fcff"
    },
    //线
    {
      data: [
        [0, 0],
        [0.5, 1],
        [1, 0]
      ],
      type: "line",
      symbol: "none", // 去掉线的拐点
      color: "#979797"
    },
    {
      data: [
        [0.2, 0.4],
        [0.8, 0.4]
      ],
      type: "line",
      symbol: "none",
      color: "#979797"
    },
    {
      data: [
        [0.3, 0],
        [0.3, 0.6]
      ],
      type: "line",
      symbol: "none",
      color: "#979797"
    },
    {
      data: [
        [0.7, 0],
        [0.7, 0.6]
      ],
      type: "line",
      symbol: "none",
      color: "#979797"
    },
    // 标注文字
    {
      type: "scatter",
      symbolSize: 1,
      symbol: "roundRect",
      data: [[0.44, 0.6]],
      label: {
        normal: {
          position: "middle",
          distance: 0,
          show: true,
          formatter: ["对话型"].join("\n"),
          backgroundColor: "transparent",
          fontSize: 14,
          color: "#fff"
        }
      }
    },
    {
      type: "scatter",
      symbolSize: 1,
      symbol: "roundRect",
      data: [[0.13, 0.2]],
      label: {
        normal: {
          position: "middle",
          distance: 0,
          show: true,
          formatter: ["练习型"].join("\n"),
          backgroundColor: "transparent",
          fontSize: 14,
          color: "#fff"
        }
      }
    },
    {
      type: "scatter",
      symbolSize: 1,
      symbol: "roundRect",
      data: [[0.44, 0.2]],
      label: {
        normal: {
          position: "middle",
          distance: 0,
          show: true,
          formatter: ["混合型"].join("\n"),
          backgroundColor: "transparent",
          fontSize: 14,
          color: "#fff"
        }
      }
    },
    {
      type: "scatter",
      symbolSize: 1,
      symbol: "roundRect",
      data: [[0.74, 0.2]],
      label: {
        normal: {
          position: "middle",
          distance: 0,
          show: true,
          formatter: ["讲授型"].join("\n"),
          backgroundColor: "transparent",
          fontSize: 14,
          color: "#fff"
        }
      }
    }
  ]
};


// 对比

// 课堂分配
export const ComOption = {
  title: {
    text: '课堂一',
    top: '45%',
    left: "35%",
    textStyle: {
      color: '#00FF9E',
      fontWeight: 500,
      fontSize: 18
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['55%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside',
        formatter: (a) => {
          console.info(a)
          return `${a.name}\n \n${a.percent}% | ${a.value} 分钟`
        }
      },
      data: [
        {
          value: 37,
          name: '教师授课时间',
          itemStyle: {
            color: '#1F73FF'
          },
          label: {
            color: '#fff'
          }
        },
        {
          value: 8,
          name: '学生活动时间',
          itemStyle: {
            color: '#00D5FF'
          },
          label: {
            color: '#fff'
          }
        },

      ]
    }
  ]
};